<template>
	<div style="display: flex; align-items: center">
		<div style="width: 100px; text-align: end; padding-right: 10px; font-size: 12px">{{ title }}</div>
		<el-input style="flex: 1" v-model="object.val" :disabled="disabled" :placeholder="placeHolder" />
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps({
	modelObject: {
		value: Object,
		default: () => ({ val: '' }),
	},
	disabled: {
		value: Boolean,
		default: false,
	},
	title: {
		value: String,
		default: '',
	},
	placeHolder: {
		value: String,
		default: '',
	},
});
const object: any = ref(props.modelObject);
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<style scoped></style>
